<template>
  <div class="sold-list">
    <div class="sold">
      <div class="block">
        <img class="shop-img" src="@/assets/shop1.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop2.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop4.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop2.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop6.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop4.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop5.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
      <div class="block">
        <img class="shop-img" src="@/assets/shop6.png"/>
        <div class="shop-content">
          <span class="content">梦境系列</span>
          <span><img class="level" src="@/assets/等级@2x.png" /></span>
          <div class="user">
            <span class="avatar"><img src="@/assets/头像.webp.png" /></span>
            <p class="user-name">袁泽明</p>
            <el-button class="sale" size="small">￥533</el-button>
          </div>
        </div>
      </div>
    </div>
    <div>
      <p>没有更多数据了~</p>
    </div>
  </div>
</template>
<script>
export default {
  name: 'SoldList'
}
</script>
<style lang="scss" scoped>
.sold-list{

  .sold {
    float: left;
    width: 100%;
    height: auto;
    margin-top: 10px;
    margin-left: 66px;
    margin-bottom: 12px;
  }

  .block {
    float: left;
    width: 278px;
    margin-top: 25px;
    margin-left: 5px;
    margin-right: 20px;
    margin-bottom: 24px;
    background-color: #fff;
    border-radius: 14px;

    .shop-img{
      width: 293px;
      height: 318px;
      margin-left: -9px;
      margin-top: -38px;
    }

    .shop-content{
      width: 258px;
      height: 86px;
      margin-left: 18px;

      .content {
      font-size: 18px;
      }

      .level {
      width: 14.9px;
      height: 12.08px;
      margin-left: 5px;
      }
      .user {
        padding-top: 14px;

        .avatar {
          img {
          width: 26px;
          height: 26px;
          }
        }

        .el-button {
          width: 66px;
          height: 36px;
          float: right;
          padding-left: 8px;
          margin-right: 16px;
          margin-top: -45px;
          background: #fff;
          border: 2px solid #2C2C34;
          font-size: 16px;
          font-weight: 400;
          color: #2C2C34;
          opacity: 1;
        }

        .sale {
          width: 66px;
          height: 36px;
          float: right;
          padding-left: 8px;
          margin-right: 16px;
          margin-top: -45px;
          background: #E1E1E1;
          border: none;
          font-size: 16px;
          font-weight: 400;
          color: #fff;
          opacity: 1;
        }

        .user-name{
          width: 50px;
          margin-left: 33px;
          margin-top: -25px;
        }
      }
    }
  }

  p{
    text-align: center;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    color: #333;
  }
}
</style>
